import React from "react";
import {Badge, Divider} from 'antd';

import BaseComponent from "../../../redare/components/BaseComponent";
import UserPresenter from "../../../.gen/presenter/UserPresenter";
import UserAddFormModal from "./UserAddFormModal";
import ModifyRoleModal from "./ModifyRoleModal";
import Grid from "../../../redare/components/grid/Grid";

export default class UserManagementGrid extends BaseComponent {

    constructor(props) {
        super(props);
        this.curPage = 1;
        this.searchParams = {};
        this.presenter = new UserPresenter(this)
    }

    componentDidMount() {
        this.findUserPage()
    }

    findUserPage(searchParam, page) {
        if (searchParam) {
            this.searchParams = searchParam;
        }
        if (page) {
            this.curPage = page;
        }
        this.showLoading(true);
        this.presenter.findUserPage(
            this.searchParams,
            {curPage: this.curPage},
            (result) => {
                let {data} = result;
                if (data && this.grid) {
                    let {result, curPage, pageSize, totalCount} = data;
                    this.grid.setData(result, {curPage, pageSize, totalCount})
                }
            },
            () => {
                this.showLoading(false)
            }
        )
    }

    pageChange(curPage) {
        this.curPage = curPage;
        this.findUserPage()
    }

    _showEdit(id) {
        if(this.editForm) {
            this.editForm._show(id)
        }
    }

    updateRole(id) {
        if (this.modifyRoleModal) {
            this.modifyRoleModal._show(id)
        }
    }

    _delUser(accountId) {
        this.confirm("确定删除该用户吗？", () => {
            this.presenter.delUser(
                {accountId},
                {},
                () => {
                    this.toastSuccess("删除成功");
                    this.findUserPage()
                }
            )
        })
    }

    render() {
        return (
            <>
                <Grid
                    ref={(o) => {
                        this.grid = o
                    }}
                    size="middle"
                    scroll={{x: 700}}
                    _onPageChange={(page) => {
                        this.pageChange(page.curPage)
                    }}
                    _initLoading={false}
                    bordered={false}
                    rowKey={(v) => v.id}
                    columns={[
                        {
                            title: '账号',
                            dataIndex: 'account',
                            width: 100,
                            ellipsis: true,
                        },
                        {
                            title: '姓名',
                            dataIndex: 'name',
                            width: 100,
                            ellipsis: true,
                        },
                        {
                            title: '电话',
                            dataIndex: 'mobile',
                            width: 100,
                            ellipsis: true,
                        },
                        {
                            title: '角色',
                            dataIndex: 'roleNames',
                            width: 100,
                            ellipsis: true,
                        },
                        {
                            title: '邮箱',
                            dataIndex: 'email',
                            width: 100,
                            ellipsis: true,
                        },
                        {
                            title: '状态',
                            dataIndex: 'status',
                            width: 100,
                            render: (text, record, index) => {
                                if (text === 0) {
                                    return <Badge text="启用" color="green"/>
                                } else {
                                    return <Badge text="禁用" color="red"/>
                                }
                            }
                        },
                        {
                            title: '操作',
                            width: 150,
                            fixed: 'right',
                            render: (text, record) => {
                                return (
                                    <>
                                        <a onClick={() => this.updateRole(record.id)}>角色修改</a>
                                        <Divider type="vertical"/>
                                        <a onClick={() => this._showEdit(record.id)}>编辑</a>
                                        <Divider type="vertical"/>
                                        <a onClick={() => this._delUser(record.id)}>删除</a>
                                    </>
                                )
                            }
                        }
                    ]}
                />
                <UserAddFormModal ref={(o) => this.editForm = o} refresh={() => this.findUserPage()}/>
                <ModifyRoleModal ref={(o) => this.modifyRoleModal = o} refresh={() => this.findUserPage()}/>
            </>
        )
    }

    showLoading(bool) {
        if (this.grid) {
            bool ? this.grid.showLoadingIndicator() : this.grid.closeLoadingIndicator()
        }
    }
}